<template>
    <div>
        <header>
            <div class="left">
                <div style="margin-left: 15px">
                    <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
                    <el-divider direction="vertical" />
                    <el-dropdown @command="selectCourse">
                        <span class="el-dropdown-link">
                            <span>课程论坛</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in list" :command="item">{{ item.courseName }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <span class="text">{{ courseInfo.courseName }}</span>
            </div>
            <head-portraits style="margin-right: 20px"></head-portraits>
        </header>
        <div class="container">
            <div style="width: 40rem;">
                <user-comment
                    input-type="textarea"
                    button-text="发布"
                    placeholder="此刻你想和大家分享什么..."
                    :course-id="courseInfo.id"
                    @isReload="reload"
                    v-if="userInfo.userType !== 'administrator'"
                ></user-comment>
                <div v-loading="loading">
                    <comment-content
                        class="content"
                        v-for="item in commentList"
                        :comment-info="item"
                        :thumbs-array="commentThumbs"
                        @remove="remove"></comment-content>
                </div>
                <el-divider>没有更多了</el-divider>
            </div>
    
            <aside v-if="userInfo.userType !== 'student' " style="margin-top: 10px">
                <el-card>
                    <el-table :data="studentData">
                        <el-table-column label="学生列表" align="center">
                            <template slot-scope="scope">
                                <el-popover
                                    placement="right"
                                    width="200"
                                    trigger="hover">
                                    <p>
                                        <strong>用户名：</strong>
                                        <span>{{ scope.row.username }}</span>
                                    </p>
                                    <p>
                                        <strong>学生类型：</strong>
                                        <span>{{ scope.row.admin ? '管理员' : '非管理员' }}</span>
                                    </p>
                                    <div style="text-align: center">
                                        <el-button type="warning" size="mini" v-if="scope.row.admin" @click.native="makeAdmin(scope.row)">取消管理员身份</el-button>
                                        <el-button type="primary" size="mini" v-else @click.native="makeAdmin(scope.row)">设为管理员</el-button>
                                    </div>
                                    <div slot="reference" :style="{ color: scope.row.admin ? '#fc7123' : '#606266' , width: '100%'}">
                                        {{ scope.row.username }}
                                        <i v-if="scope.row.admin" class="el-icon-user-solid"></i>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </aside>
        </div>
    </div>
    
</template>

<script src="./courseBBS.js"></script>

<style lang="scss" scoped>
header {
    z-index: 999;
    position: fixed;
    width: 100%;
    background-color: #fff;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center
}
.text {
    font-weight: bolder;
    font-size: 18px;
    transform: translateX(50%);
}
.el-dropdown-link {
    cursor: pointer;
}
.container {
    display: flex;
    justify-content: center;
    height: 100%;
    transform: translateY(70px);
    ::v-deep .el-card {
        border-radius: 10px;
    }
}
.title {
    font-size: 18px;
    font-weight: bolder;
}
.infinite-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.el-divider__text {
    background-color: #E9EEF3;
    color: #888
}
.text2 {
    display: block;
    color: #1989fa;
    font-size: 14px;
}
.icon {
    display: block;
    color: #1989fa;
    font-size: 18px;
}
aside {
    margin-left: 10px;
    width: 220px;
}
strong {
    display: inline-block;
    width: 5rem;
}
</style>
